<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./bower_components/animejs/lib/anime.min.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                margin: 10px auto;
                width: 480px;
                list-style: none;
                display: flex;
                flex-wrap: wrap;
            }
            li {
                width: 100px;
                height: 100px;
                border: 1px solid rgb(42, 255, 95);
                margin: 10px;
                box-sizing: border-box;
            }
            .active {
                border: 2px solid rgb(255, 128, 128);
            }
            .action{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <ul>
            <li data-ri="0">1</li>
            <li data-ri="1">2</li>
            <li data-ri="2">3</li>
            <li data-ri="3">4</li>
            <li data-ri="11">5</li>
            <li class="action">点这里</li>
            <li>7</li>
            <li data-ri="4">8</li>
            <li data-ri="10" style="order:-1">9</li>
            <li>10</li>
            <li>11</li>
            <li data-ri="5">12</li>
            <li data-ri="9">13</li>
            <li data-ri="8">14</li>
            <li data-ri="7">15</li>
            <li data-ri="6">16</li>
        </ul>

        <script>
            var battery = {
                charged: "0%",
                cycles: 120,
            };

            
            var tn=10;
            var lastone=1

            function start(){
                var target = {
                    num:0
                };
                var scroll=anime({
                    targets: target,
                    num: tn,
                    round: 1,
                    duration:1000,
                    // autoplay: false,
                    easing: "cubicBezier(0.20, 0, 0, 1)",
                    update: function () {
                        document.querySelector(`[data-ri="${lastone}"]`).classList.remove('active')
                        document.querySelector(`[data-ri="${target.num%12}"]`).classList.add('active')
                        lastone = target.num%12
                        // scroll.pause()
                    },
                    complete(){
                        console.log(1)
                    }
                });
            }
            document.querySelector('.action').addEventListener('click',function(){
                start()
            })
        </script>
    </body>
</html>
